<template>
  <div class="dialog">
    <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->
    <el-dialog title="查看详情" :visible.sync="visiable">
      <div class="dialog-wrapper">
        <el-table :data="tableData" border style="width: 654">
          <el-table-column prop="number" label="编号" width="180"></el-table-column>
          <el-table-column prop="name" label="名称" width="250"></el-table-column>
          <el-table-column prop="discount" label="折扣">
            <template slot-scope="scope">
              <div v-show="showFlag" class="discount" @click="handleDiscount(scope)">{{scope.row.discount}}</div>
              <el-input v-model="scope.row.discount" v-show="!showFlag" @input="handleElTableInput(scope)"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visiable = false">取 消</el-button>
          <el-button type="primary" @click="visiable = false" @click.native="handleButtonClick">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getViewDetail, modifyDiscount} from '@/api/table'
import {searchPart_id} from '@/api/operations'
import {Message} from 'element-ui'
export default {
  props: {
    id:{
      type: Number,
       default: -1
    }
  },
  data() {
    return {
      showFlag: true,
      discount: '',
      tableData: [],
      visiable: false,
      formLabelAlign: {
        number: "",
        name: "",
        repertory: "",
        price: ""
      },
      modify: [],
      params: {},
      timer: null

    };
  },
  methods: {
    handleButtonClick() {
      this.params.user_id = this.id
      this.params.list = JSON.stringify(this.modify)
      if (!this.modify.length) return 
      modifyDiscount(this.params)
      let getItem = JSON.parse(localStorage.getItem(`SET_STORAGE_LIST${this.id}`))
      let getStore
      if (typeof(getItem.list) === 'string') {
        getStore = JSON.parse(getItem.list)
      } 
      if (typeof(getItem.list) === 'object') {
        getStore = getItem.list
      }
      
      // console.log(getStore.list)
      this.modify.forEach((item) => {
        // console.log(item)
        for (let i = 0; i < getStore.length; i++) {
          if(getStore[i].part_id === item.part_id) {
            getStore[i].discount = item.discount
          } 
        }
      })
      getItem.list = getStore
      localStorage.setItem(`SET_STORAGE_LIST${this.id}`, JSON.stringify(getItem))
    },
    handleDiscount() {
      this.showFlag = false
    },
    handleElTableInput(scope) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        let discount = scope.row.discount
        searchPart_id({keyword: scope.row.number})
          .then((res) => {
            if (res.code === 200) {
              if (res.data.list.length === 0) {
                Message({
                  message: '该折扣无法编辑',
                  type: 'info'
                })
                return
              }
              if (this.modify.length === 0) {
                this.modify.push({"part_id":res.data.list[0].id, "discount": discount})
              } else {
                let index = this.modify.findIndex((item, index) => {
                  return item.part_id === res.data.list[0].id
                })
                if (index >= 0) {
                  this.modify.splice(index, 1)
                }
                this.modify.push({"part_id":res.data.list[0].id, "discount": discount})
              }
              // console.log(this.modify)
            }
          })
      }, 1000)
    },
    changeVisable() {
      this.visiable = true
      setTimeout(() => {
        this.fetchData()
        
      }, 20)
    },
    fetchData() {
      let params = {}
      params.user_id = this.id
      getViewDetail(params).then((response) => {
        if (response.code === 200) {
          let data = response.data
          let index = data.findIndex((item) => {
            // console.log(item.discount >= 10)
            return item.discount >= 10
          })
          if (index >= 0) {
             data.splice(index, 1)
          }
          this.tableData = response.data
          // console.log(this.tableData)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog /deep/ .el-dialog {
  width: 654px;
  // height: 396px;
  border-color: rgb(187, 187, 187);
  border-radius: 4px;
  font-size: 14px;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  text-align: left;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  opacity: 1;
  .el-form {
    position: relative;
    top: -10px;
  }
  .el-form-item__label {
    white-space: nowrap;
  }
  .el-dialog__header {
    text-align-last: left;
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
    font-style: normal;
    line-height: 24px;
  }
  .el-input__inner {
    width: 100px;
    height: 21px !important;
    border-color: rgb(233, 233, 233);
    font-size: 14px;
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    line-height: 20px;
    opacity: 1;
    border: none;
    outline: none;
    color: rgb(90, 152, 222) !important;
  }
  .unit {
    position: absolute;
    left: 270px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-start;
    position: relative;
    top: 10px;
    .el-button {
      width: 80px;
      height: 30px;
      border-radius: 4px;
      font-size: 14px;
      border-width: 1px;
      border-style: solid;
      text-align: center;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
      padding: 0;
      span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
      }
      &:nth-of-type(2) {
        background-color: rgb(90, 152, 222);
      }
    }
  }
}
.el-table /deep/ .cell{
  white-space: nowrap;
}
.discount{
  color: rgb(90, 152, 222) !important;
}
</style>
